<template>
  <SuperTable ref="superTableRef" search :pager="false" border align="center" :columns="columns" :data-request="fetchData"
    :export-config="{}" header-title="字段管理">
    <template #action>
      <Button type="primary" @click="showEditModalFn('新增')"><plus-outlined />新增字段</Button>
    </template>
  </SuperTable>

  <WeightModal v-model:show-modal="state.showWeightModal" :data="state.currentData" @weightModalOk="refreshTableFn" />
  <EditModal v-model:show-modal="state.showEditModal" :data="state.currentData" :title="state.editModalTitle"
    @editModalOk="refreshTableFn" />
</template>

<script setup lang="ts">
import SuperTable from '@/framework/components/core/super-table/super-table.vue';
import type { TableColumnItem } from './columns';
import { baseColumns } from './columns';
import { reactive, ref } from 'vue';
import { commonSearch, commonDelete } from '@/api/common/common_data';
import { message } from 'ant-design-vue';
import Button from '@/framework/components/basic/button/button.vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import WeightModal from '@/modules/sample_manage/pages/field-management/components/weight-modal.vue';
import EditModal from '@/modules/sample_manage/pages/field-management/components/edit-modal.vue';

/**
 * fn
 */
const showEditModalFn = (params) => {
  if (params === '新增') {
    state.currentData = {};
  }
  state.editModalTitle = params;
  state.showEditModal = true;
};
/**
 * table
 */
const state: {
  currentData: any;
  showWeightModal: boolean;
  showEditModal: boolean;
  editModalTitle: string;
} = reactive({
  currentData: {},
  showWeightModal: false,
  showEditModal: false,
  editModalTitle: '',
});
const superTableRef = ref<InstanceType<typeof SuperTable>>();
const columns: TableColumnItem[] = [
  ...baseColumns,
  {
    title: '操作',
    field: '$action',
    hideInSearch: true,
    align: 'center',
    fixed: 'right',
    width: 200,
    actions: ({ row }) => [
      {
        label: '修改',
        ifShow: row.editType !== 1,
        onClick: () => {
          state.currentData = row;
          showEditModalFn('修改');
        },
      },
      {
        label: '删除',
        ifShow: row.editType !== 1,
        popConfirm: {
          title: '确认要删除该字段？',
          onConfirm: async () => {
            await commonDelete(row.id);
            message.success('操作成功！');
            refreshTableFn();
          },
        },
      },
      {
        label: '修改权重',
        ifShow: row.editType === 1,
        onClick: () => {
          state.currentData = row;
          state.showWeightModal = true;
        },
      },
    ],
  },
];
const fetchData = async () => {
  let data = superTableRef.value?.getFormModel();
  let params = {
    orderBy: [
      {
        field: 'sortIndex',
        order: 'asc',
      },
    ],
    groupId: 'specimen_fields',
    ...data,
  };
  let res = await commonSearch(params);
  return {
    data: res.result,
    pageIndex: 1,
    pageSize: 10000,
    total: 10000,
  };
};
const refreshTableFn = () => {
  superTableRef.value?.refreshTable();
};
</script>

<style scoped lang="less"></style>
